<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二.读取元素当前的样式</title>
    <style>
        #box1{
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
    </style>
    <script>
        window.onload=function(){
            var box1=document.getElementById("box1");
            var btn01=document.getElementById("btn01");
            btn01.onclick=function(){
                //读取box1的宽度
                // alert(box1.style.width);

                /* 
                    获取元素当前显示的样式
                    语法：元素.currentStyle.样式名
                    它可以用来读取当前元素正在显示的样式
                    如果当前元素没有设置该样式，则获取它的默认值

                    currentStyle只有IE浏览器支持，其他的浏览器都不支持
                */
                alert(box1.currentStyle.height);
                // box1.currentStyle.width="200px"

               /* 
               其他浏览器的方式：
                    getComputedStyle()这个方法来获取元素当前的样式
                    这个方法是window的方法，可以就直接使用
                    需要两个参数
                        第一个：要获取样式的元素
                        第二个，可以传递一个伪元素，一般传null
                        该方法会返回一个对象，对象中封装了元素当前对应的样式
                        可以通过对象.样式名来读取样式
                        如果获取的样式没有设置，则会获取到真实的值，而不是默认值
                        比如：没有设置width，它不会获取到auto，而是一个长度

                        该方法不支持IE8及以下的浏览器

                        通过currentStyle和getComputedStyle()读取到的样式都是只读的
                        不能修改，如果要修改必须通过Style属性
               */
               var obj=getComputedStyle(box1,null); 
               alert(obj.width);

              // 
              

           //     var w=getStyle(box1,"width");
           //     alert(w);
           //     alert(getStyle(box1,"height"));


             /* 
               定义一个函数，用来获取指定元素当前的样式
               参数：
               obj 要获取样式的元素
               name 要获取的样式名
               */
              function getStyle(obj,name){
                //先在函数里找，函数里没有，去全局里找，如果都没有就报错了，他是window对象的属性
                //没加window他是一个变量，需要在作用域里寻找，加了window它变成了一个变量的属性，变量没找到报错，属性没找到返回undefined
                  if(window.getComputedStyle){
                    //正常浏览器的方式,具有getComputedStyle()方法。
                    return getComputedStyle(obj,null)[name];
                  }
                  else{
                     //IE8的方式
                     return obj.currentStyle[name];
                  }

                //   if(obj.currentStyle){
                //        //IE8的方式
                //      return obj.currentStyle[name];
                //   }
                //   else{
                //      //正常浏览器的方式,具有getComputedStyle()方法。
                //      return getComputedStyle(obj,null)[name];
                //   }
                  
                 
              }
            };
        }

    </script>
<body>
    <button id="btn01">点我一下</button>
    <br/><br/>
    <!-- <div id="box1" style="width: 200px;"></div> -->
    <div id="box1"></div>
    
</body>
</html>